<template>
    <div>
        <el-table
            highlight-current-row
            strpe
            :data="tableData"
            style="width: 100%;"
            @cell-mouse-enter="cellMouseEnter"
            @cell-mouse-leave="cellMouseLeave"
            :cell-style="{paddingTop: '4px', paddingBottom: '4px'}">
            <el-table-column label="变量名">
                <template slot-scope="scope">
                    <el-input clearable v-model="scope.row.key" placeholder="接收抽取值后的变量名" size="medium"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="jmespath抽取表达式(格式参照body.data[1])">
                <template slot-scope="scope">
                    <el-input clearable v-model="scope.row.value" placeholder="抽取表达式" size="medium"></el-input>
                </template>
            </el-table-column>

            <el-table-column
                label="描述"
                width="300">
                <template slot-scope="scope">
                    <el-input clearable v-model="scope.row.desc" placeholder="抽取值简要描述" size="medium"></el-input>
                </template>

            </el-table-column>

            <el-table-column width="130">
                <template slot-scope="scope">
                    <el-row v-show="scope.row === currentRow">
                        <el-button
                            icon="el-icon-circle-plus-outline"
                            size="mini"
                            type="info"
                            @click="handleEdit(scope.$index, scope.row)">
                        </el-button>

                        <el-button
                            icon="el-icon-delete"
                            size="mini"
                            type="danger"
                            v-show="tableData.length > 1"
                            @click="handleDelete(scope.$index, scope.row)">
                        </el-button>
                    </el-row>

                </template>
            </el-table-column>

        </el-table>
        <div style="margin-top: 20px;height: 500px;overflow-y: scroll">接口响应格式：
            <pre>{{api_resp}}</pre>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            save: Boolean,
            extract: {
                require: false
            },
            api_resp: {
                require: false
            }
        },
        computed: {
            height() {
                return window.screen.height - 440
            }
        },
        watch: {
            save: function () {
                this.$emit('extract', this.parseExtract(), this.tableData);
            },
            extract: function () {
                if (this.extract.length !== 0) {
                    this.tableData = this.extract;
                }
                console.log("extrace:", this.tableData);
            },
            api_resp:function () {
                delete this.api_resp.content
            }

        },

        methods: {
            cellMouseEnter(row) {
                this.currentRow = row;
            },

            cellMouseLeave(row) {
                this.currentRow = '';
            },

            handleEdit(index, row) {
                this.tableData.push({
                    key: '',
                    value: '',
                    desc: ''
                });
            },

            handleDelete(index, row) {
                this.tableData.splice(index, 1);
            },
            // 抽取格式化
            parseExtract() {
                let extract = {
                    extract: [],
                    desc: {}
                };
                for (let content of this.tableData) {
                    const key = content['key'];
                    const value = content['value'];
                    if (key !== '' && value !== '') {
                        let obj = {};
                        obj[key] = value;
                        extract.extract.push(obj);
                        extract.desc[key] = content['desc'];
                    }
                }
                return extract;
            }
        },

        data() {
            return {
                currentRow: '',
                tableData: [{
                    key: '',
                    value: '',
                    desc: ''
                }],
            }
        },
        name: "Extract"
    }
</script>

<style scoped>
</style>
